<template>
  <div>
    <!-- 映射二级路由内容 -->
    <router-view />
    <!-- 底部选项卡 -->
    <mt-tabbar fixed v-model="tabselected">
      <mt-tab-item id="index">
        <span class="iconfont icon-chongwushouye"></span>
        <p>首页</p>
      </mt-tab-item>
      <mt-tab-item id="text">
        <span class="iconfont icon-chongwuwanju"></span>
        <p>宠物圈</p>
      </mt-tab-item>
      <mt-tab-item id="adoptm">
        <span class="iconfont icon-xiedaichongwu"></span>
        <p>宠物百科</p>
      </mt-tab-item>
      <mt-tab-item id="me">
        <!-- <img v-show="tabselected == 'me'" src="" />
        <img v-show="tabselected != 'me'" src="" /> -->

        <span class="iconfont icon-chongwujiyang"></span>
        <p>我的</p>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 底部选中项的id  /home/me  ['','home','me']
      tabselected: this.$route.path.split("/").pop(),
      // tabselected: index,  //绑定底部选项卡选中值
    };
  },

  activated() {
    // 将路由最后一级路径 赋值给tabSelected
    this.tabselected = this.$route.path.split("/").pop();
  },

  watch: {
    tabselected(to, from) {
      //tabSelected变化时自动执行
      // 判断一下，防止路由重复跳转
      if (this.tabselected == this.$route.path.split("/").pop()) {
        return; // 重复路由，不需要跳转
      }
      console.log("点击了底部选项卡：", to);
      if (to == "index") {
        this.$router.push("/home/index");
      } else if (to == "text") {
        this.$router.push("/home/text");
      } else if (to == "me") {
        this.$router.push("/home/me");
      } else if (to == "adoptm") {
        this.$router.push("/home/adoptm");
      }
    },
  },
};
</script>
<style scoped>
.mint-tab-item{
  height: 5vh;
}
.mint-tab-item p{
  margin: 5px 0;
}
.mint-tabbar > .mint-tab-item.is-selected {
    background-color: #eaeaea;
    color: #e49204;
}
</style>
